<template>
  <div class="container">
    <div class="importdata">
      <el-button :loading="loading_but" @click="clickInput">
        新生数据初始化
      </el-button>
      <el-button :loading="loading_img" @click="importExamImg">
        高考照片导入
      </el-button>
      <input type="file" @change="handlerImageChange" multiple="multiple" name="filename" accept="image/*" id="choosefile" style="display:none"/>
    </div>
    <input
      id="upfile"
      type="file"
      @change="handleFileChange"
      class="file"
      value="{stufile}"
      accept=".xls,.xlsx"
      placeholder="选择文件"
    />
    <el-dialog :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column
          property="all_cou"
          label="总数据条数"
          width="150"
        ></el-table-column>
        <el-table-column
          property="success_cou"
          label="成功数据条数"
          width="200"
        ></el-table-column>
        <el-table-column
          property="fail_cou"
          label="失败数据条数"
          width="200"
        ></el-table-column>
        <el-table-column
          property="fail_rows"
          label="失败的行"
          width="200"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { Loading } from 'element-ui';

export default {
  data() {
    return {
      loading_but: false,
      dialogTableVisible: false,
      loading_img:false
    };
  },
  methods: {
    import_img() {
        this.$notify({
          title: '正在建立索引',
          message: '正在导入图片数据',
          type: 'success'
        });
      },
      import_img_suc() {
        this.$notify({
          title: '图片索引完成',
          message: '图片导入成功',
          type: 'success'
        });
      },
      import_img_fail() {
        this.$notify({
          title: '图片导入失败',
          message: '图片导入失败',
        });
      },
      upload_data() {
        this.$notify({
          title: '正在导入数据',
          message: '正在导入学生信息数据',
          type: 'success'
        });
      },
      upload_suc() {
        this.$notify({
          title: '上传学生信息成功',
          message: '上传学生信息成功',
          type: 'success'
        });
      },
      upload_fail() {
        this.$notify({
          title: '上传学生信息失败',
          message: '上传学生信息失败',
        });
      },
    clickInput() {
      document.getElementById("upfile").click();
    },
    handleFileChange(event) {
      let file = event.target.files[0];
      var forms = new FormData();
      var configs = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      forms.append("student_info", file);
      this.loading_but = true;
      this.upload_data()
      axios
        .post("http://127.0.0.1:8000/student/batch_create/", forms, configs)
        .then((res) => {
          console.log(res);
          this.gridData = [res.data.data]
          console.log(this.gridData)
          this.loading_but = false;
          this.dialogTableVisible = true
          this.upload_suc()
        }).catch(err=>{
          this.loading_but = false;
          this.upload_fail()
        });
    },
    handlerImageChange(event){
      this.loading_img=true
      let files = event.target.files
      console.log(files)
      var forms = new FormData();
      var configs = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      // forms.append("exam_images", files);
      for (let i = 0;i < files.length;i++) {
        forms.append('files', files[i],files[i].name)
      }
      this.import_img()
      axios
        .post("http://127.0.0.1:8000/student/import_exam_img/",forms, configs)
        .then((res) => {
          console.log(res);
          this.loading_img=false
          this.import_img_suc()
        }).catch((err)=>{
          this.loading_img=false
          this.import_img_fail()
        });
    },
    // 导入高考照片
    importExamImg() {
      document.getElementById("choosefile").click();
    }
  },
};
</script>


<style scoped>
template {
  padding: 0;
  margin: 0;
}
.container {
  position: absolute;
  top: 40%;
  left: 52%;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
}
.importdata {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.file {
  display: none;
}
</style>
